<template>
  <div class="iframe">
    <div class="i-title">
      <h3>customRef 函数</h3>
    </div>
    <div class="i-tip">
      <el-input type="text" v-model="inpValue" />
      <div class="i-tip">{{inpValue}}</div>
    </div>
  </div>
</template>

<script>
  import {
    customRef
  } from "vue";
  export default {
    name: "hello",
    setup() {
      // 自定义一个 v-model
      function myRef(value) {
        return customRef((track, trigger) => {
          return {
            get() {
              track() // 追踪后续数据的变化
              return value + "_old"
            },
            set(newValue) {
              value = newValue + "_new"
              trigger() // 重新解析模板
            }
          }
        })
      }
      let inpValue = myRef('hello')
      return {
        inpValue,
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
